<template>
  <!-- 节点 -->
  <div
    class="node-capsule-component"
    :style="{
      width: `${nodeWidth - 4}px`,
      height: `${nodeHeight - 4}px`,
    }"
    @click="selectNode($event)"
  >
    <!--胶囊 -->
    <div class="dropdown-capsule">
      <!-- 节点图标 -->
      <div
        class="type-icon"
        :style="{
          'font-size': `${decimalZoomScale * 34}px`,
          height: `${nodeHeight - 6}px`,
          width: `${nodeHeight - 6}px`,
        }"
      >
        <a-icon-font class="type-icon-color" :type="iconInfo('icon')" />
      </div>
      <!-- 节点名称 -->
      <div
        class="node-name"
        :style="{
          width: calcNameWidth + 'px',
          'font-size': `${decimalZoomScale * 12}px`,
          top: nodeHeight + 3 + 'px',
        }"
      >
        <div class="normal-display">{{ node.name }}</div>
      </div>
      <div
        class="status-icon-content"
        :style="{
          height: `${nodeHeight - 8}px`,
          width: '2px',
        }"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { nodeIconWithBackGround } from '@/components/studio/data/graph-compoments/node-icon-util'

@Component({
  components: {},
})
export default class VirtualNodeCapsule extends Vue {
  // 节点高度
  @Prop({ type: Number, default: 0 }) nodeHeight!: number
  // 节点宽度
  @Prop({ type: Number, default: 0 }) nodeWidth!: number
  // 节点
  @Prop({ type: Object, default: () => ({}) }) node!: any
  // 缩放比例
  @Prop({ type: Number, default: 0 }) zoomScale!: number

  // 小数 缩放比例
  private get decimalZoomScale() {
    return this.zoomScale / 100
  }

  private get calcNameWidth() {
    // 节点宽度 -  边框4 - 4padding - 节点图标宽度 - 节点状态宽度  - 间距
    return this.nodeWidth - 8 - (this.nodeHeight - 8) * 2 - 8
  }

  /**
   * 节点图标 和 背景色
   */
  private iconInfo(type: string) {
    return nodeIconWithBackGround(this.node.type, this.node.data.algType)[type]
  }
}
</script>

<style scoped lang="less">
/* 节点执行动画 unused */
@keyframes node-running {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
/* 执行节点 unused  */
.node-capsule-running {
  animation: node-running 1.4s ease infinite;
  background-size: 400% 100% !important;
}

/* 节点 胶囊 */
.node-capsule-component {
  align-content: center;
  background-color: #fff;
  box-sizing: border-box;
  justify-content: center;
  position: absolute;
  z-index: 30;

  /* dropdown 中的节点胶囊 */
  .dropdown-capsule {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    font-size: 14px;
    height: 100%;
    justify-content: center;
    text-align: center;
    user-select: none;
    width: 100%;
  }

  /* 尾部添加节点 */
  .after-add-node {
    background-color: #f0f2f5;
    height: 14px;
    line-height: 14px;
    position: absolute;
    right: -16px;
    transition: opacity 0.5s;
    width: 14px;

    &::before {
      background-color: transparent;
      content: '';
      height: 32px;
      left: -5px;
      position: absolute;
      width: 6px;
    }
  }

  // 禁用
  .node-no-forbidden {
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
  }

  /* 节点禁用灰度 */
  .node-forbidden {
    background-color: rgba(1, 1, 1, 0.2);
    border-radius: 16px;
    height: 100%;
    width: 100%;
  }

  /* 节点图标 */
  .type-icon {
    align-items: center;
    // background-color: rgba(154, 162, 255, 1);
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;

    // .type-icon-color {
    //   color: #fff;
    // }
  }

  /* 节点name */
  .node-name {
    align-items: center;
    background-color: transparent;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;

    .normal-display {
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 100%;
    }

    /* 节点名称编辑 */
    .edit-name {
      height: 100%;
      padding: 0 2px;

      /deep/.ant-input {
        height: 100%;
        padding: 1px 2px;
      }
    }
  }

  /* 节点状态 */
  .status-icon-content {
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    top: -15px;

    .status-icon {
      height: 18px;
      width: 18px;
    }
  }
}
</style>
